<template>
  <div id="app">
    <!-- 头部区域 -->
    <div class="header">
      <span class="goBack" @click="goBack" v-if="$route.path !== '/home'">
        <i class="van-icon van-icon-arrow-left"></i>
        返回
      </span>
      黑马商城.vant
    </div>
    <!-- 路由的占位符 -->
    <router-view></router-view>
    <!-- 底部区域 tabbar -->
    <van-tabbar v-model="active" route v-if="showBottomBar" @change="changeTab(active)">
      <van-tabbar-item to="/home">
        <i slot="icon" class="iconfont icon-index-fill"></i>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/member">
        <i slot="icon" class="iconfont icon-icon_zhanghao"></i>
        <span>会员</span>
      </van-tabbar-item>
      <van-tabbar-item icon="shopping-cart" :badge="goodsCount" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
// 按需导入mapState函数，将所需数据映射为计算属性使用
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 底部tab栏默认激活项的索引
      active: 0
    }
  },
  created () {
    this.getCartCount()
  },
  methods: {
    ...mapMutations(['getCartCount']),
    // 当底部tab栏发生切换时触发
    async changeTab (i) {
      // 如果切换到了'购物车'项
      if (i === 2) {
        // 修改showBottomBar的值为false————隐藏底部tab栏
        this.$store.commit('changeShowBottomBar', i)
      }
    },
    // 点击返回按钮
    goBack () {
      // 修改showBottomBar的值为false————显示底部tab栏
      this.$store.commit('changeShowBottomBar', 0)
      // 编程式导航回退
      this.$router.go(-1)
    }
  },
  // 计算属性
  computed: {
    ...mapState(['showBottomBar', 'goodsCount'])
  }
}
</script>

<style lang="less">
// .header {
//   width: 100%;
//   height: 50px;
//   background-color: skyblue;
//   color: white;
//   text-align: center;
//   line-height: 50px;
// }
#app {
  height: 100%;
}
.header {
  width: 100%;
    height: 40px;
    background: #1989fa;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.iconfont {
  font-size: 18px!important;
}
.goBack {
  position: fixed;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  left: 15px;
}
</style>
